<template>
  <div>
    <div class="item-title">
      用量统计
    </div>
    <div class="item-body">
      <div id="usage" ref="usageRef" style="width: 100%;height: 232px;">

      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {getEnergyYearUseData} from '@/api/bigScreen'
export default {
  name: 'UsageStatistics',
  data() {
    return {
      usageList: [],
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          itemWidth: 25,  // 图例项宽度
          itemHeight: 14,  // 图例项高度
          itemGap: 13,
          x: 'center', // 图例水平居中
          y: 'middle', // 图例垂直居中
          data: ['电', '水', '气', '热'],
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        grid: {
          top: '45px',
          left: '20px',
          right: '35px',
          bottom: '3%',
          containLabel: true
        },
        color: ['#5087ec', '#68bbc4', '#58a55c', '#f2bd42'],
        xAxis: [{
          type: 'category',
          // boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          data: ['1月','2月','3月','4月','5月','6月',]
        }],
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 0,
            }
          },
          splitLine: {
            lineStyle: {
              color: '#fff',
              width: 1,
              opacity: 0.5
            }
          },
          // max : 150000,
          min : 0,
          splitNumber: 5,
        },
        series: [
          // {
          //   name: '电',
          //   type: 'bar',
          //   data: [1103, 1239, 1034, 1070, 2034, 1970]
          // },
          // {
          //   name: '水',
          //   type: 'bar',
          //   data: [1975, 2438, 3100, 1194, 2234, 1100]
          // },
          // {
          //   name: '气',
          //   type: 'bar',
          //   data: [1925, 2348, 3400, 1219, 2054, 1040]
          // },
          // {
          //   name: '热',
          //   type: 'bar',
          //   data: [1225, 2438, 3240, 1294, 2314, 1000]
          // },
        ]
      },
      myChart: null,
    }
  },
  mounted() {
    this.renderChart()
  },
  // 销毁组件
  beforeDestroy() {
    this.disposeChart();
  },
  watch:{
  },
  methods: {
    renderChart() {
      this.initEcharts()
    },
    initEcharts() {
      this.myChart = echarts.init(this.$refs.usageRef);
      this.getEnergyYearUse();
      window.addEventListener('resize', this.handleResize);
    },
    getEnergyYearUse(){
      getEnergyYearUseData(null).then(response => {
        if(response.code === 200) {
          this.option.xAxis[0].data = response.data.xAxisData
          this.option.series = response.data.series;
        }
        this.myChart.setOption(this.option);
      })
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    disposeChart() {
      if (this.myChart) {
        // 移除 resize 事件监听
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表实例
        this.myChart.dispose();
        this.myChart = null;
      }
    }
  }
}
</script>
<style src="../../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
</style>
